<template>
	<view class="container">
		<navbar title="兑换订单"></navbar>
		<view class="tab-wrap">
			<view class="tab-item" :class="[tabIndex == index ? 'tab-act':'']" v-for='(item,index) in tab'  @tap='changeTab(index)'>{{item}}</view>
		</view>
		<view class="wrap">
			<view class="order-wrap">
				<view class="order-li" v-for="(item,index) in 10">
					<view class="order-top pad">
						<view class="order-sn">订单编号：12365466475890608</view>
						<view class="order-status">待发货</view>
					</view>
					<view class="order-goods pad">
						<view class="order-img">
							<base-img></base-img>
						</view>
						<view class="order-right">
							<view class="order-name-wrap">
								<view class="order-name">欧莱雅(LOREAL)复颜玻尿酸化妆品护肤</view>
								<view class="order-num">x1</view>
							</view>
							<view class="order-price">
								<view class="order-icon">
									<image src='/static/inter.png'></image>
								</view>
								<text>10000</text>
							</view>
						</view>
					</view>
					<view class="time-wrap pad">
						<view class="time">兑换时间：2023-05-23 21:31:47</view>
						<view class="time-right">
							<view class="t">
								实付：
							</view>
							<view class="order-price">
								<view class="order-icon">
									<image src='/static/inter.png'></image>
								</view>
								<text>10000</text>
							</view>
						</view>
					</view>
					<view class="btn-wrap pad">
						<view class="btn detail-btn line_center">订单详情</view>
						<view class="btn sure-btn line_center">确认收货</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import baseImg from '@/components/base-img/base-img.vue';
	export default {
		components:{
			baseImg
		},
		data() {
			return {
				tab:['全部','待发货','待收货','已完成'],
				tabIndex:0,
			};
		},
		methods:{
			changeTab(index){
				this.tabIndex = index
			},
		}
	}
</script>

<style lang="scss">
	.tab-wrap{
		width:100%;
		height: 80rpx;
		background: $dis-con-color;
		position: fixed;
		left:0;
		z-index:888;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding:0 40rpx;
		box-sizing: border-box;
		border-bottom: 1rpx solid $dis-bg-color;
		.tab-act{
			position: relative;
			color:$dis-inter-color;
			&:after{
				content: '';
				width: 46rpx;
				height: 4rpx;
				background: $dis-inter-color;
				border-radius: 4rpx;
				position: absolute;
				left:0;
				right:0;
				margin:auto;
				bottom:-10rpx;
			}
		}
	}
	.pad{
		padding:0 24rpx;
	}
	.wrap{
		padding-top: 80rpx;
		padding-bottom: 100rpx;
	}
	image{
		width:100%;
		height: 100%;
	}
	.order-li{
		background: $dis-con-color;
		margin-bottom: 20rpx;
		.order-top{
			display: flex;
			justify-content: space-between;
			padding-top:20rpx;
			padding-bottom: 20rpx;
			font-size: 24rpx;
			.order-status{
				color:$dis-inter-color
			}
		}
		.order-goods{
			height: 172rpx;
			background: #F8F8F8;
			display: flex;
			align-items: center;
			font-size: 24rpx;
			.order-img{
				width: 132rpx;
				height: 132rpx;
				margin-right: 32rpx;
			}
			.order-right{
				flex:1;
				height: 132rpx;
				overflow: hidden;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
			}
			.order-name-wrap{
				display: flex;
				justify-content: space-between;
				.order-name{
					width: 432rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
				.order-num{
					color:#999
				}
			}
			
		}
	}
	.order-price{
		display: flex;
		align-items: baseline;
		.order-icon{
			width: 28rpx;
			height: 28rpx;
			margin-right: 12rpx;
		}
		text{
			font-size: 30rpx;
			color:$dis-inter-color;
		}
	}
	.time-wrap{
		display: flex;
		justify-content: space-between;
		border-bottom: 1rpx solid #eee;
		padding-top:18rpx;
		padding-bottom: 18rpx;
		font-size: 24rpx;
		.time-right{
			display: flex;
			align-items: center;
		}
	}
	.btn-wrap{
		padding-top:18rpx;
		padding-bottom: 18rpx;
		display: flex;
		justify-content: flex-end;
		.btn{
			width: 132rpx;
			height: 58rpx;
			border-radius: 6rpx;
			font-size: 26rpx;
			box-sizing: border-box;
		}
		.detail-btn{
			border: 1rpx solid #999999;
			margin-right: 10rpx;
		}
		.sure-btn{
			background: $dis-font-color;
			color:#fff;
		}
	}
</style>
